<template>
	<div class="login-index-wrap">
		<div class="head-wrap" v-if="$route.name !== 'fail'">
			<img src="~@/assets/auth/logo.png" class="logo">

			<div class="text">这个地方可以放企业文化，精神等</div>
		</div>

		<div class="content">
			<router-view/>
		</div>

		<div class="copyright">Copyright © {{currentYear}} {WEB_TITLE_NAME}版权所有</div>

		<valid-code-img ref="validCodeImgRef" @on-success="handleValidCodeSuccess"/>
	</div>
</template>

<script>
export default {
	data (){
		return {
			currentYear: new Date().getFullYear(),
		}
	},

	created() {
		this.$busCollect(
			this.$bus.on('auth.valid-code-img.open', params => this.__openDialog('validCodeImgRef', params))
		)
	},

	methods: {
		handleValidCodeSuccess (imgCode){
			this.$bus.emit('auth.valid-code-img.success', imgCode);
		}
	}
}
</script>

<style lang="scss" scoped>
.login-index-wrap {
	width: 100%;
	height: 100%;
	min-height: 100vh;
	background: #F0F2F5 url("~@/assets/auth/back.svg") no-repeat;
	background-size: 100% 100%;
	overflow: auto;
	& > .head-wrap{
		padding-top: 72px;
		text-align: center;
		& > .logo{
			height: 46px;
		}
		& > .text{
			margin-top: 12px;
			text-align: center;
			color: rgba(0,0,0,.45);
			font-size: 14px;
		}
	}
	& > .content{
		width: 368px;
		margin: 40px auto 0;
		min-height: calc(100vh - 275px);
		&::v-deep .ivu-form{
			& .ivu-form-item{
				& > .ivu-form-item-content{
					& .ivu-input, & .ivu-btn{
						height: 40px;
						line-height: 40px;
						border-radius: 0;
					}
				}
				&.send-msg-code-item > .ivu-form-item-content{
					display: flex;
					align-items: center;
					& > .ivu-btn{
						margin-left: 16px;
					}
				}
				&.button-item > .ivu-form-item-content{
					display: flex;
					align-items: center;
					justify-content: space-between;
					& > .registry{
						width: 200px;
					}
					& > .text-btn{
						cursor: pointer;
						user-select: none;
						color: #1890ff;
						transition: .3s;
						&:hover{
							font-weight: bold;
						}
					}
				}
			}
		}
	}
	& > .copyright{
		padding: 40px 0 20px;
		text-align: center;
		font-size: 12px;
		color: #999999;
	}
}
</style>
